import React, { useEffect } from 'react';
import { Form, Input, Modal } from 'antd';
import { RoleTableListItem } from '../roleData.d';

export interface FormValueType extends Partial<RoleTableListItem> {
}

export interface UpdateFormProps {
    onCancel: () => void;
    onSubmit: (values: Partial<RoleTableListItem>) => void;
    updateModalVisible: boolean;
    currentData: Partial<RoleTableListItem>;
}
const FormItem = Form.Item;

const formLayout = {
    labelCol: { span: 7 },
    wrapperCol: { span: 13 },
};

const RoleUpdateForm: React.FC<UpdateFormProps> = (props) => {
    const [form] = Form.useForm();

    const {
        onSubmit,
        onCancel,
        updateModalVisible,
        currentData,
    } = props;

    useEffect(() => {
        if (form && !updateModalVisible) {
            form.resetFields();
        }
    }, [props.updateModalVisible]);

    useEffect(() => {
        if (currentData) {
            form.setFieldsValue({
                ...currentData,
            });
        }
    }, [props.currentData]);

    const handleSubmit = () => {
        if (!form) return;
        form.submit();
    };

    const handleFinish = (values: { [key: string]: any }) => {
        if (onSubmit) {
            onSubmit(values);
        }
    };

    const renderContent = () => {
        return (
            <>
                <FormItem
                    name="roleId"
                    label="主键"
                    hidden
                >
                    <Input id="update-roleId" placeholder="请输入主键" />
                </FormItem>
                <FormItem
                    name="roleName"
                    label="名称"
                    rules={[{ required: true, message: '请输入名称' }]}
                >
                    <Input id="update-roleName" placeholder="请输入名称" />
                </FormItem>
                <FormItem
                    name="description"
                    label="描述"
                >
                    <Input id="update-description" placeholder="请输入描述" />
                </FormItem>
                <FormItem
                    name="status"
                    label="启用状态"
                >
                    <Input id="update-status" placeholder="请输入启用状态" />
                </FormItem>
                <FormItem
                    name="sort"
                    label="排序"
                >
                    <Input id="update-sort" placeholder="请输入排序" />
                </FormItem>
            </>
        );
    };


    const modalFooter = { okText: '保存', onOk: handleSubmit, onCancel };

    return (
        <Modal
            forceRender
            destroyOnClose
            title="用户管理"
            visible={updateModalVisible}
            {...modalFooter}
        >
            <Form
                {...formLayout}
                form={form}
                onFinish={handleFinish}
            >
                {renderContent()}
            </Form>
        </Modal>
    );
};

export default RoleUpdateForm;
